<template>
  <div class="zerominiplayer">
    <!-- <div
      class="mini_bd"
      :style="{'background':$store.state.curindex==-1?'#d43c33':`url(${songDetail.al.picUrl}?param=100y100)`}"
    ></div>-->
    <div class="mini_bd" :style="{'background':songDetail.al.picUrl?`url(${songDetail.al.picUrl}?param=100y100)`:'rgba(255, 0, 0, 0.8)'}"></div>
    <div class="mini">
      <div class="mini_left" @click="openPlayer" v-if="$store.state.curindex!=-1">
        <div
          class="mini_pic"
          :style="{'animationPlayState':$store.state.audiostate?'running':'paused' }"
        >
          <img :src="songDetail.al.picUrl?`${songDetail.al.picUrl}?param=100y100`:`${require('../assets/base.png')}`" alt />
        </div>
        <div class="mini_name">
          <p>{{songDetail.name}}</p>
          <span>{{songDetail.ar[0].name}}</span>
        </div>
      </div>
      <div class="mini_right">
        <i
          class="mid iconfont"
          :class="$store.state.audiostate?'icon-zanting':'icon-bofang'"
          @click="controlState"
        ></i>
        <i class="iconfont icon-icon-next" @click="nextSong"></i>
        <i class="iconfont icon-liebiao" @click="openqueue"></i>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "zerominiplayer",
  data() {
    return {
    };
  },
  methods: {
    //
    openPlayer() {
      if (this.$store.state.curindex != -1) {
        this.$store.commit("openPlayer", true);
        this.audio.currentTime = this.$store.state.currenttime;
      }
    },
    // 控制播放或暂停
    controlState() {
      if (this.$store.state.curindex != -1) {
        if (!this.$store.state.audiostate) {
          this.audio.play();
        } else {
          this.audio.pause();
        }
      }
    },
    //下一首
    nextSong() {
      this.$store.commit("changeIndex", "next");
      this.audio.playSong(this.curplayid);
      // }
    },
    //打开播放列表
    openqueue() {
      if (this.$store.state.curindex != -1) {
        this.$store.commit("openPlayList", true);
      }
    }
  },

  computed: {
    //监听歌曲下标变化
    // songDetail() {
    //   if (this.$store.state.curindex != -1) {
    //     let details = this.$store.getters.playdetails;
    //     let id = details.id;
    //     return details;
    //   }
    // },
    //监听歌曲下标变化获取歌曲id
     curplayid() {
      let temp = this.$store.getters.playdetails;
      console.log("temp", temp);
      let id = temp.id;
      // this.$store.dispatch("getSongdetails", this.id);
      return id;
    },
    songDetail() {
      return this.$store.state.songinfoDetails;
    }
  }
};
</script>


<style lang='scss'>
.zerominiplayer {
  width: 100vw;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  z-index: 6;
  .mini_bd {
    &::after {
      content: "";
      position: absolute;
      top: 5px;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      filter: blur(10px) brightness(0.7);
      z-index: -1;
    }
  }
  .mini {
    display: flex;
    justify-content: space-between;
    height: 40px;
    overflow: hidden;

    .mini_left {
      width: 60vw;
      .mini_pic {
        width: 40px;
        height: 40px;
        position: absolute;
        bottom: 0px;
        left: 5px;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
        border: 3px solid #333;
        animation: rotatemini 20s linear infinite forwards;
        animation-play-state: paused;
        img {
          width: 100%;
          height: 100%;
        }
        i {
          color: #fff;
        }
      }
      .mini_name {
        margin-left: 50px;
        color: #fff;
        text-align: left;
        p {
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span {
          font-size: 10px;
          width: 40vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .mini_right {
      width: 100%;
      text-align: right;
      i {
        color: #fff;
        line-height: 40px;
        font-size: 36px;
        margin: 0 10px;
      }
    }
  }
}
@keyframes rotatemini {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>